<template>
  <div v-loading="loading">
    <!-- 主任务信息 -->
    <el-descriptions title="主任务信息" :column="2" border>
      <el-descriptions-item label="任务名称">{{ taskInfo.taskName }}</el-descriptions-item>
      <el-descriptions-item label="任务状态">
        <el-tag v-if="taskInfo.status == 0" type="info">待接收</el-tag>
        <el-tag v-else-if="taskInfo.status == 1" type="warning">进行中</el-tag>
        <el-tag v-else-if="taskInfo.status == 2" type="success">已完成</el-tag>
        <el-tag v-else-if="taskInfo.status == 3" type="danger">异常</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="优先级">
        <el-tag v-if="taskInfo.priority == 0" type="info">低</el-tag>
        <el-tag v-else-if="taskInfo.priority == 1" type="warning">中</el-tag>
        <el-tag v-else-if="taskInfo.priority == 2" type="danger">高</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="负责人">{{ taskInfo.assigneeName }}</el-descriptions-item>
      <el-descriptions-item label="截止时间">{{ parseTime(taskInfo.dueDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{ parseTime(taskInfo.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</el-descriptions-item>
      <el-descriptions-item label="任务描述" :span="2">{{ taskInfo.description }}</el-descriptions-item>
      <el-descriptions-item label="备注" :span="2">{{ taskInfo.remark }}</el-descriptions-item>
    </el-descriptions>

    <!-- 子任务列表 -->
    <div style="margin-top: 20px;">
      <h3>子任务列表</h3>
      <el-table :data="subTaskList" style="width: 100%" v-if="subTaskList.length > 0">
        <el-table-column prop="subTaskName" label="子任务名称" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="description" label="描述" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="assigneeName" label="负责人" width="120"></el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 0" type="info">未开始</el-tag>
            <el-tag v-else-if="scope.row.status == 1" type="warning">进行中</el-tag>
            <el-tag v-else-if="scope.row.status == 2" type="success">已完成</el-tag>
            <el-tag v-else-if="scope.row.status == 3" type="danger">异常</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <!-- 子任务状态更新 -->
            <el-dropdown v-if="scope.row.status != 2" @command="(command) => handleUpdateSubTaskStatus(scope.row.subTaskId, command)">
              <el-button size="mini" type="text">
                更新状态<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-if="scope.row.status == 0" command="1">开始</el-dropdown-item>
                <el-dropdown-item v-if="scope.row.status == 1" command="2">完成</el-dropdown-item>
                <el-dropdown-item command="3">异常</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <el-empty v-else description="暂无子任务"></el-empty>
    </div>

    <div slot="footer" class="dialog-footer" style="text-align: right; margin-top: 20px;">
      <el-button @click="$emit('close')">关 闭</el-button>
    </div>
  </div>
</template>

<script>
import { getMaintask } from "@/api/task/maintask"
import { updateSubTaskStatus } from "@/api/task/subTask"

export default {
  name: "TaskDetail",
  props: {
    taskId: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      loading: false,
      taskInfo: {},
      subTaskList: []
    }
  },
  created() {
    this.getTaskDetail()
  },
  methods: {
    /** 获取任务详情 */
    getTaskDetail() {
      this.loading = true
      getMaintask(this.taskId).then(response => {
        this.taskInfo = response.data
        this.subTaskList = response.data.subTaskList || []
        this.loading = false
      })
    },
    
    /** 更新子任务状态 */
    handleUpdateSubTaskStatus(subTaskId, status) {
      this.$modal.confirm('是否确认更新该子任务状态？').then(() => {
        return updateSubTaskStatus(subTaskId, status)
      }).then(() => {
        this.$modal.msgSuccess("状态更新成功")
        this.getTaskDetail() // 重新加载数据
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>
h3 {
  margin-bottom: 10px;
  color: #303133;
}
</style>